<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        h1,
        h2,
        h3 {
            background: grey;
            color: white;
        }

        hgroup>h1 {
            margin-bottom: 0px;
        }

        hgroup>h2 {
            background: grey;
            color: white;
            font-size: 1em;
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <!-- section元素 文档中的一节，使用标题中的元素实际上也生成了隐含的节 -->
    <section>
        <hgroup>
            <h1>Fruits I like</h1>
            <h2>How I Learned to Love Citrus</h2>
        </hgroup>
        <!-- h1,h2生成带子标题的标题 ；无法区分同级的h2标题 -->
        <!-- <h2>How I Learned to Love Citrus</h2> -->
        I like apples and oranges.
        <section>
            <h1>Additional fruits</h1>
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            <section>
                <h1>More information</h1>
                You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.
            </section>
        </section>
    </section>
    <h1>Activities I like</h1>
    <p>I like to swim, cycle and run. I am in training for my first triathlon,
        but it is hard work.</p>
    <h2>Kinds of Triathlon</h2>
    There are different kinds of triathlon - sprint, Olympic and so on.
    <h3>The kind of triathlon I am aiming for</h3>
    I am aiming for Olympic. which consists of the following:
    <ol>
        <li>1.5km swim</li>
        <li>40km cycle</li>
        <li>10km run</li>
    </ol>
    <hr>

</body>

</html>